<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Demo Navigation Tabbed Stylish</title>
<link href="https://db-blogger.googlecode.com/svn/trunk/Exsperimen/demo/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>
<style>
.wrap { margin-top: 150px; }
ul.tabs {
  width: 600px;
  height: 80px;
  margin: 0 auto;
  list-style: none;
  overflow: hidden;
  padding: 0;
}
ul.tabs li {
  float: left;
  width: 200px;
}
ul.tabs li a {
  position: relative;
  display: block;
  height: 30px;
  margin-top: 40px;
  padding: 10px 0 0 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  background: #1abc9c;
  -webkit-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  box-shadow: 8px 12px 25px 2px rgba(0,0,0,0.4);
  border: 0px solid #000000;
  -webkit-transition: padding 0.2s ease, margin 0.2s ease;
  -moz-transition: padding 0.2s ease, margin 0.2s ease;
  -o-transition: padding 0.2s ease, margin 0.2s ease;
  -ms-transition: padding 0.2s ease, margin 0.2s ease;
  transition: padding 0.2s ease, margin 0.2s ease;
}
.tabs li:first-child a {
  z-index: 3;
  -webkit-border-top-left-radius: 8px;
  -moz-border-radius-topleft: 8px;
  border-top-left-radius: 8px;
}
.tabs li:nth-child(2) a { z-index: 2; }
.tabs li:last-child a {
  z-index: 1;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-top-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}
ul.tabs li a:hover {
  margin: 35px 0 0 0;
  padding: 10px 0 5px 0;
}
ul.tabs li a.active {
  margin: 30px 0 0 0;
  padding: 10px 0 10px 0;
  background: #2c3e50;
  color: #D3FEF5;
  /*color: #ff6831;*/
  z-index: 4;
  outline: none;
}
.group:before,
.group:after {
  content: " "; 
  display: table;
}
.group:after { clear: both; }
#panels {
  width: 600px;
  height: 300px;
  margin: 0 auto;
  background: #2c3e50;
  -webkit-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -moz-box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  box-shadow: 2px 8px 25px -2px rgba(0,0,0,0.3);
  -webkit-border-bottom-right-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  -moz-border-radius-bottomleft: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}
#panels p {
  font-family: 'Open Sans', sans-serif;
  padding: 30px 40px;
  color: #ffffff;
  line-height: 26px;
  font-size: 18px;
  margin: 0;
}
#one { }
#two { display: none; }
#three { display: none; }
</style>
</head>
<body>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<ul>
<li><a href="http://defandaky.blogspot.com/">DBD BLOG</a></li>
</ul>
<div class="jquery-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* jQuery_demo */
google_ad_slot = "2780937993";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<div class="jquery-script-clear"></div>
</div>
</div>
<div class="wrap">
<h1 align="center">Demo Navigation Tabbed Stylish</h1>
  <ul class="tabs group">
    <li><a class="active" href="#/one">Tab 1</a></li>
    <li><a href="#/two">Tab 2</a></li>
    <li><a href="#/three">Tab 3</a></li>
  </ul>
  <div id="panels">
    <p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut hendrerit aliquam mauris, a mattis lectus varius id. Ut dolor tortor, hendrerit et porttitor in, gravida sed felis. Donec vehicula ex nec venenatis pulvinar. Donec vel sodales neque.</p>
    <p id="two">Donec tincidunt tortor ut magna mollis sagittis. Mauris eu nibh non purus gravida hendrerit. Donec enim nisi, pretium eu libero sit amet, bibendum sagittis velit. Pellentesque non dapibus leo. Suspendisse ante tellus, volutpat ac leo eget, venenatis rhoncus sem.</p>
    <p id="three"> Aenean dapibus eleifend venenatis. Integer et suscipit dui. Nam tellus diam, mattis in ultrices et, feugiat ac libero. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  </div>
</div>
<script>
(function($) {

	var tabs =  $(".tabs li a");
  
	tabs.click(function() {
		var panels = this.hash.replace('/','');
		tabs.removeClass("active");
		$(this).addClass("active");
    $("#panels").find('p').hide();
    $(panels).fadeIn(200);
	});

})(jQuery);
</script>
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>
</body>
</html>